import React, { useEffect } from 'react';
import Swiper from 'swiper/bundle';
import styled from './index.module.css';
import { DetailCarouselProps } from './types';
import RecommendItem from '../recommendItem';
const DetailCarousel = function ({ recommendGoods,addCart }: DetailCarouselProps) {
    useEffect(() => {
        setTimeout(() => {
            new Swiper('.mySwiper', {
                slidesPerView: 4,
                spaceBetween: 30,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
                loop: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        }, 300);
    }, []);
    return (
        <div className={styled.swiper}>
            <div className="swiper mySwiper">
                <div className="swiper-wrapper">
                    {recommendGoods &&
                        recommendGoods.map((good, index) => {
                            return (
                                <div className={['swiper-slide', styled.slide].join(' ')}>
                                    <RecommendItem addCart={addCart} key={index} good={good}></RecommendItem>
                                </div>
                            );
                        })}
                </div>
                <div className="swiper-button-next"></div>
                <div className="swiper-button-prev"></div>
            </div>
        </div>
    );
};
export default DetailCarousel;
